<template>
	<view class="login-page flex flex-column">
		<view class="flex flex-column top position-relative">
			<view class="text-center mt-4 position-absolute top-0 right-0 mr-4 bgF3F5FA rounded-circle py-1"
				style="width: 200rpx;">
				<text class="ft666666 fs-28" @tap="navTo('/pages/applyClub/applyClub')">{{$t('hhh.t205')}}</text>
			</view>
			<u-gap height="200" bgColor="transparent"></u-gap>
			<image class="mx-auto" src="/static/imgs/logo_top.png" mode="aspectFill" style="width: 600rpx;height: 74rpx;">
			</image>
			<view class="text-white fs-26 font-weight-bold text-center mt-4">{{$t('hhh.t39')}}</view>
			<u-gap height="350" bgColor="transparent"></u-gap>
		</view>

		<view class="px-5">
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t27')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t36')" border="surround" v-model.trim="email" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t28')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t37')" v-model.trim="code" :customStyle="{
						'border':0
					}">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="20" changeText="XS" :startText="$t('hhh.t29')"
								:endText="$t('hhh.t147')"></u-code>
							<u-button class="sendmsg" @tap="getCode" :text="tips" size="mini" :customStyle="{'border':0}"></u-button>
						</template>
					</u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t207')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t208')" border="surround" v-model.trim="club_code" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold" @tap="submitFn">
				{{$t('hhh.t178')}}
			</view>
			<view class="text-center mt-4"><text class="ft666666 fs-28"
					@tap="navTo('/pages/register/register')">{{$t('hhh.t40')}}</text></view>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="flex justify-center mx-5 pb-4">
				<text class="w-32 h-32  check" :class="checked?'checked':''" @tap="checked = !checked"></text>
				<view class="ft333333 fs-22 flex  flex-wrap ml-1">
					<text class="text-ellipsis mr-1">{{$t('hhh.t32')}}</text> 
					<text class="flex text-ellipsis mr-1 ft1877F2" style="max-width: 200rpx;"
						@tap="navTo(`/pages/userAgreement/userAgreement-${lang}`)">《{{$t('hhh.t33')}}》</text>
				</view>
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				tips: '',
				email: "",
				code: "",
				club_code: '',
				checked: true,
				lang: 'en'
			}
		},
		onShow() {
			this.lang = uni.getStorageSync('hhh-lang') || 'en'
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.email) {
					uni.$u.toast(this.$t('hhh.t41'));
					return
				}
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailRegex.test(this.email)) {
					uni.$u.toast(this.$t('hhh.t42'));
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: this.$t('hhh.t43')
					})
					HttpApi.sendEmailCode({
						email: this.email,
						type: 'login',
					}).then(res => {
						console.log(res)
						// 这里此提示会被this.start()方法中的提示覆盖
						if (res.code === 1) {
							uni.$u.toast(this.$t('hhh.t44'));
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					}).finally(() => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast(this.$t('hhh.t45'));
				}
			},
			submitFn() {
				if (!this.email) {
					uni.$u.toast(this.$t('hhh.t41'));
					return
				}
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailRegex.test(this.email)) {
					uni.$u.toast(this.$t('hhh.t42'));
					return
				}
				if (!this.code) {
					uni.$u.toast(this.$t('hhh.t46'));
					return
				}
				if (!this.club_code) {
					uni.$u.toast(this.$t('hhh.t206'));
					return
				}
				uni.$tools.showLoading()
				HttpApi.login({
					email: this.email,
					code: this.code,
					club_code: this.club_code
				}).then(res => {
					if (res.code === 1) {
						this.$store.commit('setToken', res.data.token)
						uni.showToast({
							title: this.$t('hhh.t47')
						})
						this.userInfo()
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			userInfo() {
				HttpApi.userInfo().then(res => {
					if (res.code === 1) {
						this.$store.commit('setUser', res.data)
						if (res.data.app_language) {
							const lang = res.data.app_language === 1 ? 'zh-Hans' : 'en';
							uni.setStorageSync('hhh-lang', lang)
						}
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 100)
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		.top {
			background-image: url('/static/imgs/login_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center top;
		}
	}
</style>